<template>
  <div
  v-loading="loading"
  element-loading-text="数据加载中"
  element-loading-spinner="el-icon-loading"
  style="height: 100%;"
  >
  <div id="mainBox">
    <p id="MyprojectTitle">我的项目</p>
    <p class="thirdTitle">共有{{showData.length}}个项目</p>
    <el-row>
      <el-col :span="8">
          <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
          </el-select>
      </el-col>
      <el-col :span="12">
          <p class="ProjcetName">项目名称</p>
          <el-input v-model="keywords" placeholder="请输入项目名称" style="width: 300px;"></el-input>
      </el-col>
    </el-row>

    <div id="bodyCard">
      <el-table ref="table"
      border stripe highlight-current-row
      :data="showTable"
      :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%;">
          <el-table-column label="所属批次" prop="batchName" >
          </el-table-column>
          <el-table-column label="批次级别" prop="levelName">
          </el-table-column>
          <el-table-column label="项目名称" prop="proName">
          </el-table-column>
          <el-table-column label="项目状态" >
            <template slot-scope="scope">
              {{GlobalMapProApproval(scope.row.proApproval)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
          <el-table-column type="expand" width="1">
            <template slot-scope="props">
              <el-card id="card" class="box-card" v-for="(item,index) in showData" :key="index" v-if="item.proId==tempProId">
                <div slot="header" class="clearfix">
                  <span>{{item.batchName}}</span>
                  <span style="float: right; padding: 3px 0" type="text"></span>
                </div>
                <div id="ProjectInfo">
                  <p class="secondTitle">{{item.proName}}</p>
                  <p class="thirdTitle">项目级别: {{item.levelName}}</p>
                  <p class="thirdTitle">当前状态: {{GlobalMapProApproval(item.proApproval)}}</p>
                </div>

                <table border="1" >
                  <thead>
                    <th width="20%">
                        <p>流程名称</p>
                    </th>
                    <th>
                      <p>状态</p>
                    </th>
                    <th width="20%">
                     <p>操作</p>
                    </th>
                  </thead>
                  <tbody>
                    <tr>
                      <td>项目申报</td>
                      <td>{{item.projectTeacherStart}}至{{item.projectTeacherEnd}}</td>
                      <td>
                        <el-button type="text" @click="checkDeclare(item.proId)">查看</el-button>
                      </td>
                    </tr>
                    <tr v-if="item.phaseInfo.length!=0" v-for="(a,index) in item.phaseInfo" :key="index+1" style="margin: 10px 0;" >
                      <td >阶段检查</td>
                      <td>
                        <div style="font-size: 15px;">
                          <el-row>
                            <el-col :span="12">
                              <p style="text-align: left;margin: 0 30px;">{{a.phaseName}}</p>
                            </el-col>
                            <el-col :span="12">
                              <span>{{a.phaseTeacherStart}}至{{a.phaseTeacherEnd}}</span>
                            </el-col>
                          </el-row>
                        </div>
                      </td>
                      <td >
                        <el-button type="text" @click="declarePhase(a.phaseId,item.proId)" v-if="a.status==0">修改</el-button>
                        <el-button type="text" v-if="a.status>=1">已提交</el-button>
                        <span v-else>
                          <span v-if="a.status==null &&
                             new Date(nowDate) >=  Date.parse(a.phaseTeacherStart)
                          && new Date(nowDate) <= Date.parse(a.phaseTeacherEnd)
                          ">
                            <el-button type="text" @click="declarePhase(a.phaseId,item.proId)" >申报</el-button>
                            <el-button type="text" @click="downloadMaterial(a.path,a.pathName)">材料下载</el-button>
                          </span>
                          <span v-else>
                            <el-button type="text">未在时间内</el-button>
                          </span>
                        </span>
                      </td>
                    </tr>

                    <tr v-if="item.closingInfo.length!=0" v-for="(b,index) in item.closingInfo" :key="b.phaseId" style="margin: 10px 0;">
                      <td>项目结题</td>
                      <td>
                        <div style="font-size: 15px;">
                          <el-row>
                            <el-col :span="12">
                              <p style="text-align: left;margin: 0 30px;">{{b.phaseName}}</p>
                            </el-col>
                            <el-col :span="12">
                              <span>{{b.phaseTeacherStart}}至{{b.phaseTeacherEnd}}</span>
                            </el-col>
                          </el-row>
                        </div>
                      </td>
                      <td>
                        <span v-if="Date.parse(b.phaseTeacherStart)>=new Date(nowDate) && new Date(nowDate)<=Date.parse(b.phaseTeacherEnd)">
                          <el-button type="text" @click="declarePhase(b.phaseId,item.proId)" v-if="b.status==0">修改</el-button>
                          <el-button type="text"  v-if="b.status>=1">已提交</el-button>
                          <span v-if="b.status==null && item.proApproval!=21 &&  item.proApproval!=23 && item.proApproval!=24 && item.proApproval!=25 && item.proApproval!=26">
                            <el-button type="text" @click="applyPostpone(item.proId)" >申请延期</el-button>
                            <el-button type="text" @click="declarePhase(b.phaseId,item.proId)" >申报</el-button>
                            <el-button type="text" @click="downloadMaterial(b.path,b.pathName)" >材料下载</el-button>
                          </span>
                          <span v-if="item.proApproval==21 || item.proApproval==23 || item.proApproval==24 || item.proApproval==25 || item.proApproval==26">
                            <el-button type="text" >
                              申请延期中
                            </el-button>
                          </span>
                        </span>
                        <span v-else>
                          <el-button type="text" >未在时间内</el-button>
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-card>

            </template>
          </el-table-column>
        </el-table>
    </div>
  <div class="resource-page">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5,2, 15]"
      :page-size="pagesize"
      :pager-count="7"
      layout=" prev, pager, next,sizes, jumper"
      :total="showData.length"
    >
    </el-pagination>
  </div>
  </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default{
    computed:{
      showTable() {
        return this.showData.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
      }
    },
    watch:{
      keywords(){
        this.searchResource()
      },
    },
    mounted() {
      this.getNowDate()
      this.getMyprojectInfo()
    },
    methods:{
      toogleExpand(row) {
        this.tempProId=row.proId
        let $table = this.$refs.table;
        this.hostProjectInfo.map((item) => {
          if (row.proId != item.proId) {
            $table.toggleRowExpansion(item, false)
          }
        })
        $table.toggleRowExpansion(row)
      },
      //得到当前日期
      getNowDate(){
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1): nowDate.getMonth() + 1;
        var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
         .getDate();
        var dateStr = year + "-" + month + "-" + day;
        this.nowDate=dateStr
      },
      //材料下载
      downloadMaterial(url,fileSort){
       axios.get(this.Base_Api+'/file/fileDownload', {
           headers: {
             token: this.$store.state.token,
             tokenHead: this.$store.state.tokenHead,
             jsession_id: this.$store.state.jsession_id
             },
             responseType: 'blob',
           params: {
            fileName:'test',
            fileUrl:url
           }
       }) .then((res)=>{
         console.log(res)
           //获取最后一个.的位置
           var index= fileSort.lastIndexOf(".");
           //获取后缀
           var ext = fileSort.substr(index+1);
           console.log(ext)
           //rar是用不了，暂且统一使用.zip下载
           var blog = new Blob([res.data],{type:'application/x-zip-compressed'})
           var  url = window.URL.createObjectURL(blog)
           var  a   = document.createElement('a')
           a.setAttribute('download',fileSort)
           a.setAttribute('href',url)
           a.click()
       }) .catch(function (error) { console.log(error); });
      },
      downloadRes(res,sort){
        var blog = new Blob([res.data],{type:sort})
        var url  = window.URL.createObjectURL(blog)
        var a    = document.createElement('a')
            a.setAttribute('download','')
            a.setAttribute('href',url)
            a.click()
      },
      applyPostpone(proId){
        this.$router.push({path:'/postponeCause',query:{proId:proId}})
      },
      declarePhase(phaseId,proId){
        this.$router.push({path:'/phaseDeclare',query:{phaseId:phaseId,proId:proId}})
      },
      changePage(){
        this.showData=this.hostProjectInfo.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
        console.log(this.showData)
      },
      searchResource() {
        this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
        let filterKeywords = this.keywords.trim();
        let filerReasource = this.hostProjectInfo.filter((item) => {
          //过滤全部数据
          if (item.proName.includes(filterKeywords)) {
            return item;
          }
        });
        this.showData = filerReasource; //将符合条件的内容赋给filterDataShow
      },
      handleSizeChange(psize) {
        this.pagesize = psize;

      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;

      },
      formateStatus(StatuId){
        //项目审核(-1 申报 0  暂存  1   提交    2  学院通过  3 专家审核    4  学校通过   5   驳回  6  学院不通过   7 学校不通过 8 学校二审通过 9 学校二审不通过 10 院级阶段检查通过 11 院级阶段检查不通过  12 校级阶段检查通过 13 校级阶段检查不通过 14 学院结项检查通过 15 学院结项不通过 16 学校结项通过   17 学校结项不通过 18 专家结项通过 19 专家结项不通过 20学校二次结项通过 21 学校二次结项不通过 22 校级同意延期 23 校级不同意延期 24 申请延期 25 院级同意延期 26 院级不同意延期)
        if(StatuId==-1){
          return "申报"
        }
        if(StatuId==0){
          return "暂存"
        }
        if(StatuId==1){
          return "提交"
        }
        if(StatuId==2){
          return "学院通过"
        }
        if(StatuId==3){
          return "专家审核"
        }
        if(StatuId==4){
          return "学校通过"
        }
        if(StatuId==5){
          return "驳回"
        }
        if(StatuId==6){
          return "学院不通过"
        }
        if(StatuId==7){
          return "学校二审通过"
        }
        if(StatuId==8){
          return "学校二审通过"
        }
        if(StatuId==9){
          return "学校二审不通过"
        }
        if(StatuId==12){
          return "校级阶段检查通过"
        }
        if(StatuId==20){
          return "学校二次结项通过"
        }
        if(StatuId==25){
          return "学院同意延期"
        }
        if(StatuId==27){
          return "结项成功"
        }
      },
      checkDeclare(proId){
        this.$router.push({path:'/lookOver',query:{pro_id:proId}})
      },
      getMyprojectInfo(){
        this.$api.project.getHostProjects({}).then((res)=>{
          this.hostProjectInfo=res.data.data
          this.changePage()
          this.loading=false
        })
      }
    },
    data(){
      return{
            headerObj: {
              token: this.$store.state.token,
              tokenHead: this.$store.state.tokenHead,
              jsession_id: this.$store.state.jsession_id
            },
            tempProId:'',
            nowDate:'',
            loading:true,
            pagesize: 5,
            currentPage: 1,
            showData:[],
            hostProjectInfo:[],
            keywords: '',
            options: [{
              value: '选项1',
              label: '所有项目'
            }],
            value: '',
            Base_Api:process.env.Base_API
      }
    }
  }
</script>

<style scoped>
p{
  margin: 15px 0;
}
table{
  width: 100%;
  border: 1px solid #d0d0d0;
  border-collapse:collapse;
}

table td{
  text-align: center;
}

thead th p{
  font-size: 18px;
  font-weight: 800;
  margin: 5px 0;
}

#ProjectInfo{
  padding:0 0 0 20px;
}
#mainBox{
  width: 1000px;
  margin: 0 auto;
}
#bodyCard{
  margin-top: 20px;
}
#card{
  margin-top: 20px;
}
.ProjcetName{
  display: inline;
}
#MyprojectTitle{
  font-size: 40px;
}
.secondTitle{
  margin: 0;
  font-size: 25px;
}
.thirdTitle{
  font-size:15px;
  color: #9a9a9a;
}

.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

thead th p {
  text-align: center;
}
</style>
